单点登录跨域iframe互相通信方案 |
您所在的位置:网站首页 › 单点登录 cookie › 单点登录跨域iframe互相通信方案 |
最近公司要采用单点登录技术,又不想和传统的单点登录一样,比如说,A系统登录了,再进B系统会直接登录,但是这里有个不好的体验度就是B系统会有一个内部跳转的过程,会重定向到认证中心,再回来。所以这次我们就是要攻克这个跳转的过程,提高这个用户体验度。
废话不多说,开整~~!
先上一个架构时序图 这个方案网上也有大佬用过,算是借鉴了部分思路,但是正好这块是自己以前接触过的一个技术点,所以才想到用这种方式。
a.html页面的代码~~~~(我是后端原谅我写的丑~~~) Guns这是主页 window.onload = () =>{ var data=JSON.stringify({ msg:'msg', token:'331' }) document.getElementsByTagName('iframe')[0].contentWindow.postMessage(data,'*'); } window.addEventListener('message',function(e){ // 有消息从子级传来时 存贮 tokenData // if(e.source!=window.parent) return; console.log("==========a===========") //e.data即是我们从A传来的数据 这里使用localStorage进行存贮(请勿使用sessionStorage) localStorage.setItem("tokenData",e.data); console.log(e.data); },false);b.html页面的代码 (同上) Guns这是b页 console.log(localStorage.getItem("tokenData")); window.addEventListener('message',function(e){ console.log("==========b===========") // 有消息从父级传来时 存贮 tokenData if(e.source!=window.parent) return; //e.data即是我们从A传来的数据 这里使用localStorage进行存贮(请勿使用sessionStorage) localStorage.setItem("tokenData",e.data); console.log(e.data); var child = JSON.stringify(localStorage.getItem("tokenData")); window.parent.postMessage(child, '*'); },false);当然直接这样可能是不行的,还要配置hosts哦 127.0.0.1 www.aa.com 127.0.0.1 www.bb.com 然后部署起来就行啦。 访问测试 可以互相通信,单点登录的策略就能实现了,加油!奥力给~~! 源码下载:https://download.csdn.net/download/lj88811498/12919806 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |